<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ include file="/resources/jstl_contexpath.jsp"%>
<!DOCTYPE html>
<html>
<head>
    <title>虎丘婚纱城管理系统</title>
    <link rel="stylesheet" type="text/css" href="<c:url value="/resources/bs3/css/bootstrap.min.css" />" />
    <link rel="stylesheet" type="text/css" href="<c:url value="/resources/css/bootstrap-reset.css" />" />
    <link rel="stylesheet" type="text/css" href="<c:url value="/resources/font-awesome/css/font-awesome.css" />" />
    <link rel="stylesheet" type="text/css" href="<c:url value="/resources/css/clndr.css" />" />
    <link rel="stylesheet" type="text/css" href="<c:url value="/resources/css/style.css" />" />
    <link rel="stylesheet" type="text/css" href="<c:url value="/resources/css/style-responsive.css" />" />

    <!-- start: CSS -->
    <link rel="stylesheet" type="text/css" href="<c:url value="/resources/assets/css/bootstrap.min.css" />" />
    <link rel="stylesheet" type="text/css" href="<c:url value="/resources/assets/css/style.min.css" />" />
    <link rel="stylesheet" type="text/css" href="<c:url value="/resources/assets/css/retina.min.css" />" />
    <!-- end: CSS -->

    <!-- start: Favicon and Touch Icons -->
    <link rel="apple-touch-icon-precomposed" sizes="144x144" href="<c:url value="/resources/assets/ico/apple-touch-icon-144-precomposed.png" />" />
    <link rel="apple-touch-icon-precomposed" sizes="114x114" href="<c:url value="/resources/assets/ico/apple-touch-icon-114-precomposed.png" />" />
    <link rel="apple-touch-icon-precomposed" sizes="72x72" href="<c:url value="/resources/assets/ico/apple-touch-icon-72-precomposed.png" />" />
    <link rel="apple-touch-icon-precomposed" sizes="57x57" href="<c:url value="/resources/assets/ico/apple-touch-icon-57-precomposed.png" />" />
    <link rel="shortcut icon" href="<c:url value="/resources/assets/ico/favicon.png" />" />
    <!-- end: Favicon and Touch Icons -->

    <style type="text/css">
        div.dataTables_length select {
            width: 178px;
        }
    </style>

    <style type="text/css">
        .jqstooltip {
            position: absolute;
            left: 0px;
            top: 0px;
            visibility: hidden;
            background: rgb(0, 0, 0) transparent;
            background-color: rgba(0, 0, 0, 0.6);
            filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000);
            -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000)";
            color: white;
            font: 10px arial, san serif;
            text-align: left;
            white-space: nowrap;
            padding: 5px;
            border: 1px solid white;
            z-index: 10000;
        }

        .jqsfield {
            color: white;
            font: 10px arial, san serif;
            text-align: left;
        }
    </style>
    <link rel="stylesheet" href="<c:url value="/resources/css/base.css" />" />
    <link rel="stylesheet" href="<c:url value="/resources/css/hq.css" />" />
</head>
<body>

<!-- start: Header -->
<%@ include file="/resources/head.jsp" %>
<!-- end: Header -->

<div class="container">
    <div class="row">
        <!-- start: Main Menu -->
        <%@ include file="/resources/sidebar.jsp" %>
        <!-- end: Main Menu -->

        <!-- start: Content -->
        <div id="content" class="col-lg-10 col-sm-11" style="min-height: 800px">
            <div class="form-top">
                <form action="${ctx}/manage/channel/index" method="post" class="form-inline form-group form-post">
                    <div class="form-group">
                        <input type="text" class="form-control ng-pristine ng-untouched ng-valid" style="margin-left: -24px" placeholder="渠道名称" name="channel_name" id="channel_name" value="${channel_name}">
                    </div>
                    <div class="form-group" style="margin-left: -14px">
                        <button type="submit" class="btn btn-primary">
                            <span class="btn-icon-text">搜索</span>
                        </button>
                    </div>
                </form>
                <div class="form-group">
                    <select id="channel_type" name="channel_type" class="form-control" onchange="channeyType()">
                        <option value="-1" >--选择渠道类型--</option>
                        <option value="0" <c:if test="${channel_type == 0}">selected</c:if>>线下</option>
                        <option value="1" <c:if test="${channel_type == 1}">selected</c:if>>线上</option>
                    </select>
                </div>
                <div class="form-group">
                    <select id="orderby" name="orderby" class="form-control" onchange="orderby()">
                        <option value="">--选择排序方式--</option>
                        <option value="signup_count,asc" <c:if test="${orderby == 'signup_count,asc'}">selected</c:if>>按报名人数升序</option>
                        <option value="signup_count,desc" <c:if test="${orderby == 'signup_count,desc'}">selected</c:if>>按报名人数降序</option>
                    </select>
                </div>
                <div class="form-group">
                    <button type="button" class="btn btn-success" id="batchexport">
                       <i class="icon-base icon-24 icon-btn-templateload"></i>
                        <span class="btn-icon-text">批量导出</span>
                    </button>
                    <button type="button" class="btn btn-primary" id="addnew">
                        <i class="icon-base icon-24 icon-btn-add"></i>
                        <span class="btn-icon-text">新增渠道</span>
                    </button>
                </div>
            </div>

            <div class="row">
                <div class="col-lg-12">
                    <div class="box">
                        <div class="box-header">
                            <h2><i class="fa fa-align-justify"></i><span class="break"></span>渠道管理</h2>
                            <div class="box-icon">
                            </div>
                        </div>
                        <div class="box-content">
                            <div class="box-area viewSignInfo">
                                <div class="sign-table">
                                    <table class="table table-base table-bordered">
                                        <thead>
                                        <tr>
                                            <th width="40"><a class="checkbox checkall"></a></th>
                                            <th width="100">渠道名称</th>
                                            <th>类型</th>
                                            <th>报名数</th>
                                            <th>点击量</th>
                                            <th>活动数</th>
                                            <th width="220">操作</th>
                                        </tr>
                                        </thead>
                                        <tbody>
                                        <!--这里循环table信息-->
                                        <c:forEach var="channel" items="${channel_list}" varStatus="status">
                                            <tr>
                                                <td><a class="checkbox" id="${channel.id}"></a></td>
                                                <td>${channel.name}</td>
                                                <td>
                                                    <c:if test="${channel.channel_type == 0}">线下</c:if>
                                                    <c:if test="${channel.channel_type == 1}">线上</c:if>
                                                </td>
                                                <td>${channel.signup_count}</td>
                                                <td>${channel.point_count}</td>
                                                <td>${channel.activity_num}</td>
                                                <td>
                                                    <%--<button class="btn btn-small btn-primary btn-xs detail" value="${channel.id}">详情</button>--%>
                                                    <button class="btn btn-small btn-primary btn-xs modify" value="${channel.id}">编辑</button>
                                                    <button class="btn btn-small btn-primary btn-xs export" value="${channel.id}">导出</button>
                                                    <%--<button class="btn btn-small btn-danger btn-xs qrcode" value="${channel.id}">二维码</button>--%>
                                                </td>
                                            </tr>
                                        </c:forEach>
                                        </tbody>
                                    </table>
                                </div>

                                <!--这个里边绑定第一条数据的详情-->
                                <div class="sign-info" style="border: 0;padding: 0">
                                    <table class="table table-base table-bordered">
                                        <tbody>
                                            <tr>
                                                <td>渠道名称</td>
                                                <td>${first_channel.name}</td>
                                            </tr>
                                            <tr>
                                                <td>网址</td>
                                                <td>${first_channel.website_url}</td>
                                            </tr>
                                            <tr>
                                                <td>渠道类型</td>
                                                <td>
                                                    <c:if test="${first_channel.channel_type == 0}">线下</c:if>
                                                    <c:if test="${first_channel.channel_type == 1}">线上</c:if>
                                                </td>
                                            </tr>
                                            <tr>
                                                <td>推广位置</td>
                                                <td>${first_channel.spread_position}</td>
                                            </tr>
                                            <tr>
                                                <td>推广周期</td>
                                                <td>${first_channel.spread_cycle}</td>
                                            </tr>
                                            <tr>
                                                <td>推广内容</td>
                                                <td>${first_channel.spread_content}</td>
                                            </tr>
                                            <tr>
                                                <td>推广成本</td>
                                                <td>${first_channel.spread_cost}</td>
                                            </tr>
                                            <tr>
                                                <td>PV</td>
                                                <td>${first_channel.pv}</td>
                                            </tr>
                                            <tr>
                                                <td>UV</td>
                                                <td>${first_channel.uv}</td>
                                            </tr>
                                            <tr>
                                                <td>人均点击成本</td>
                                                <td>${first_channel.point_cost_avg}</td>
                                            </tr>
                                            <tr>
                                                <td>人均报名成本</td>
                                                <td>${first_channel.signup_cost_avg}</td>
                                            </tr>
                                            <tr>
                                                <td>投放活动数</td>
                                                <td>${first_channel.activity_num}</td>
                                            </tr>
                                            <tr>
                                                <td>投放活动名称</td>
                                                <td>${first_channel.activity_names}</td>
                                            </tr>
                                        </tbody>
                                    </table>
                                </div>
                                <!--这个里边绑定第一条数据的详情-->

                                <div class="sign-info-all">
                                    <!--下面是各条信息的详情，直接循环出来，顺序与table保持一致-->
                                    <c:forEach var="channel" items="${channel_list}" varStatus="status">
                                        <div class="sign-item">
                                            <table class="table table-base table-bordered">
                                                <tbody>
                                                <tr>
                                                    <td>渠道名称</td>
                                                    <td>${channel.name}</td>
                                                </tr>
                                                <tr>
                                                    <td>网址</td>
                                                    <td>${channel.website_url}</td>
                                                </tr>
                                                <tr>
                                                    <td>渠道类型</td>
                                                    <td>
                                                        <c:if test="${channel.channel_type == 0}">线下</c:if>
                                                        <c:if test="${channel.channel_type == 1}">线上</c:if>
                                                    </td>
                                                </tr>
                                                <tr>
                                                    <td>推广位置</td>
                                                    <td>${channel.spread_position}</td>
                                                </tr>
                                                <tr>
                                                    <td>推广周期</td>
                                                    <td>${channel.spread_cycle}</td>
                                                </tr>
                                                <tr>
                                                    <td>推广内容</td>
                                                    <td>${channel.spread_content}</td>
                                                </tr>
                                                <tr>
                                                    <td>推广成本</td>
                                                    <td>${channel.spread_cost}</td>
                                                </tr>
                                                <tr>
                                                    <td>PV</td>
                                                    <td>${channel.pv}</td>
                                                </tr>
                                                <tr>
                                                    <td>UV</td>
                                                    <td>${channel.uv}</td>
                                                </tr>
                                                <tr>
                                                    <td>人均点击成本</td>
                                                    <td>${channel.point_cost_avg}</td>
                                                </tr>
                                                <tr>
                                                    <td>人均报名成本</td>
                                                    <td>${channel.signup_cost_avg}</td>
                                                </tr>
                                                <tr>
                                                    <td>投放活动数</td>
                                                    <td>${channel.activity_num}</td>
                                                </tr>
                                                <tr>
                                                    <td>投放活动名称</td>
                                                    <td>${channel.activity_names}</td>
                                                </tr>
                                                </tbody>
                                            </table>
                                        </div>
                                    </c:forEach>
                                </div>
                                <%@ include file="/resources/page.jsp"%>
                            </div>

                        </div>
                    </div>
                </div><!--/col-->
            </div>
        </div>
    </div>
</div>
<%@ include file="/resources/managerfoot.jsp"%>

<!-- start: JavaScript-->
<script type="text/javascript" src="<c:url value="/resources/assets/js/jquery-2.1.0.min.js" />" ></script>
<script type="text/javascript" src="<c:url value="/resources/assets/js/jquery-migrate-1.2.1.min.js" />" ></script>
<script type="text/javascript" src="<c:url value="/resources/assets/js/bootstrap.min.js" />" ></script>

<!-- page scripts -->
<script type="text/javascript" src="<c:url value="/resources/assets/js/jquery-ui-1.10.3.custom.min.js" />" ></script>
<script type="text/javascript" src="<c:url value="/resources/assets/js/jquery.sparkline.min.js" />" ></script>
<script type="text/javascript" src="<c:url value="/resources/assets/js/jquery.dataTables.min.js" />" ></script>
<script type="text/javascript" src="<c:url value="/resources/assets/js/dataTables.bootstrap.min.js" />" ></script>

<!-- theme scripts -->
<script type="text/javascript" src="<c:url value="/resources/assets/js/custom.min.js" />" ></script>
<script type="text/javascript" src="<c:url value="/resources/assets/js/core.min.js" />" ></script>

<!-- inline scripts related to this page -->
<script type="text/javascript" src="<c:url value="/resources/assets/js/pages/table.js" />" ></script>

<!-- end: JavaScript-->

<script>
    // 切换内容
    $(".viewSignInfo .sign-table").on('click','table tbody tr',function () {
        var _ =$(this),
                index = _.index(),
                $content = _.parents('.sign-table').next(),
                $item = $content.next().find(".sign-item");
        $content.hide().html($item.eq(index).clone().html()).fadeIn(300);
    });

    $('#addnew').click(function(){
        window.location.href="${ctx}/manage/channel/add";
    });

    function channeyType() {
        var channel_type = $('#channel_type option:selected').val();
        window.location.href="${ctx}/manage/channel/index?channel_type="+channel_type;
    }

    function orderby() {
        var orderby = $('#orderby option:selected').val();
        window.location.href="${ctx}/manage/channel/index?orderby="+orderby;
    }

    $('.detail').click(function(){
        var channel_id = $(this).val();
        window.location.href="${ctx}/manage/channel/detail?channel_id="+channel_id;
    })
    $('.modify').click(function(){
        var channel_id = $(this).val();
        window.location.href="${ctx}/manage/channel/edit?edited_channel_id="+channel_id;
    })
    $('.export').click(function(){
        var channel_id = $(this).val();
        window.location.href="${ctx}/manage/channel/export?channel_ids="+channel_id;
    })
    <%--$('.qrcode').click(function(){--%>
        <%--var channel_id = $(this).val();--%>
        <%--window.location.href="${ctx}/manage/channel/qrcode?channel_id="+channel_id;--%>
    <%--})--%>

    // 全选
    var exportOptions = {
        id:[]
    };
    $('.box-content table').on('click', 'thead a.checkall', function () {
        var _ = $(this),
                _parent = _.parent().parent().parent(),
                _siblings = _parent.next();
        if (_.hasClass('checked')) {
            _.removeClass('checked');
            _siblings.find('a.checkbox').removeClass('checked');

        } else{
            _.addClass('checked');
            _siblings.find('a.checkbox').each(function () {
                var _this = $(this),
                        id=_this.attr('id');
                _this.removeClass('checked').addClass('checked');
            });
        }
    });
    $('.box-content table').on('click', 'tbody a.checkbox', function () {
        var _ = $(this),
                _parent = _.parent().parent().parent(),
                _siblings = _parent.prev(),
                $container = $('.box-content table');
        if (_.hasClass('checked')) {
            _.removeClass('checked');
        } else{
            _.addClass('checked');
        }
        var length = $container.find(".checkbox:not(.checkall)").length;
        var curLength = $container.find(".checkbox.checked:not(.checkall)").length;
        var $checkall = $container.find(".checkbox.checkall");
        length == curLength ? $checkall.addClass("checked") : $checkall.removeClass("checked");

    });
    // 导出按钮
    $('#batchexport').on('click',function () {
        var ids = '';
        exportOptions.id=[];
        $('.box-content table').find(".checkbox:not(.checkall)").each(function () {
            var _ = $(this),
                    id = _.attr('id');
            if(_.hasClass('checked')){
                exportOptions.id.push(id);
            }
        });
        if(exportOptions.id && exportOptions.id.length){
            ids = exportOptions.id.join(',');
            console.log(ids);
            window.location.href="${ctx}/manage/channel/export?channel_ids="+ids;
            // 导出的方法
        } else{
            alert('暂无数据，请勾选渠道名称后再导出');
            return;
        }
    })
</script>

</body>
</html>